import { useState, useEffect } from "react";
import { Typography, Button } from "antd";
import { List } from "./list";
import { SearchPanel } from "./search-panel";
import qs from "qs";
import { cleanObj, useMount, useDebounce, useDocumentTitle } from "utils";
import { useHttp } from "utils/http";
import { Row, ScreenContainer } from "components/lib";
import { useProject } from "utils/Project";
import { useUser } from "utils/User";
import { useUrlQuery } from "utils/url";
import { usePorjectSearchParam } from "./util";
import { setProjectModalProps } from "authenticated-app";
const apiUrl = process.env.REACT_APP_API_URL;

export const ProjectListScreen = (props: setProjectModalProps) => {
  // console.log('ProjectListScreen组件触发');

  useDocumentTitle("项目列表", false);
  const client = useHttp();
  const [param, setParam] = usePorjectSearchParam();
  const debounceParam = useDebounce(param, 600);
  const { isLoading, error, data: lists, retry } = useProject(debounceParam);
  const { data: users } = useUser();
  const { setProjectVisible } = props;
  return (
    <ScreenContainer>
      <Row marginBottom={2} between={true}>
        <h1>项目列表</h1>
        <Button onClick={() => setProjectVisible(true)}>创建项目</Button>
      </Row>
      <SearchPanel param={param} setParam={setParam} users={users || []} />
      {error ? (
        <Typography.Text type={"danger"}>{error.message}</Typography.Text>
      ) : null}
      <List
        setProjectVisible={setProjectVisible}
        refresh={retry}
        dataSource={lists || []}
        users={users || []}
        loading={isLoading}
      />
    </ScreenContainer>
  );
};
